@extends('admin.base')
@section('css')
<link rel="stylesheet" href="/css/parsley/parsley.css"/>
@parent

@stop



@section('content')

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>自动回复消息</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{{route('/')}}">首页</a>
            </li>
            <li>
                @if ($edit_mode == 1)
                <strong>编辑自动回复消息</strong>
                @else
                <strong>新建自动回复消息</strong>
                @endif
            </li>
        </ol>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            <a href="{{route('autoreply.index')}}" class="btn btn-primary newmenu">返回自动回复列表</a>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRightBig">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>自动回复消息<small>：）</small></h5>
                    <div class="ibox-tools">
                        <!--a href="{{route('newmenu')}}" class="btn btn-primary btn-xs newmenu">提交完一级菜单点一下这里~</a-->
                    </div>
                </div>
                <div class="ibox-content">
                    @if ($edit_mode == 1)
                    <form method="POST" action="{{route('autoreply.update', $id)}}" class="form-horizontal" id="submitreply" data-parsley-validate>
                        <input name="_method" type="hidden" value="PUT">
                        @else
                        <form method="POST" action="{{route('autoreply.store')}}" class="form-horizontal" id="submitreply" data-parsley-validate>
                            @endif
                            <div class="form-group">
                                <label class="col-sm-2 control-label">规则名</label>
                                <div class="col-sm-10">
                                    @if ($edit_mode == 1)
                                    <input type="text" name="rulename" class="form-control" value="{{$replyinfo->rulename}}" placeholder="输入规则名" required data-parsley-errors-container="#rulename">
                                    @else
                                    <input type="text" name="rulename" class="form-control" placeholder="输入规则名" required data-parsley-errors-container="#rulename">
                                    @endif
                                    <span class="help-block m-b-none" id="rulename"></span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">关键词</label>
                                <div class="col-sm-10">
                                    @if ($edit_mode == 1)
                                    <input type="text" name="keyword" class="form-control" value="{{$replyinfo->keyword}}" placeholder="输入菜单的关键词" required  data-parsley-errors-container="#keyword">
                                    @else
                                    <input type="text" name="keyword" class="form-control" placeholder="输入菜单的关键词" required  data-parsley-errors-container="#keyword">
                                    @endif
                                    <span class="help-block m-b-none" id="keyword"></span>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" >回复</label>
                                <div class="col-sm-10">
                                    <ul class="tag-list" style="padding: 0">
                                        <li class=""><a href="#" class="fa fa-font wenben"></a>
                                        </li>
                                        <li><a href="#" class="fa fa-picture-o tupian"></a>
                                        </li>
                                        <li><a href="#" class="fa fa-newspaper-o tuwen"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" ></label>
                                <div class="col-sm-6">
                                    @if($edit_mode == 1)
                                    <!--回显内容-->
                                    @if($replyinfo->type=='image')
                                    <img class="uploadpic" src="{{$image}}" data-mediaid="{{$replyinfo->media_id}}" style="width: 30%;height: 30%;display: block" alt=""/>
                                    @else
                                    <img class="uploadpic" src="" style="width: 30%;height: 30%;display: none" alt=""/>
                                    @endif
                                    @if($replyinfo->type=='text')
                                    <div class="replywenben" style="display: block">{!!$replyinfo->content!!}</div>
                                    @else
                                    <div class="replywenben" style="display: none"></div>
                                    @endif
                                    @if($replyinfo->type == 'news')
                                    <div class="row news" style="display: block">
                                        <div style="position: relative">
                                            <img class="news_image" data-mediaid="{{$replyinfo->media_id}}" style="width: 200px;"
                                                 src="{{$news['thumb']}}"
                                                 alt=""/>
                                            <div class="col-sm-6 news_title" style="width:200px;position: absolute;top:120px;background: #000000;color:#ffffff">{{$news['title']}}</div>
                                        </div>
                                    </div>
                                    @else
                                    <div class="row news" style="display: none">
                                        <div style="position: relative">
                                            <img class="news_image" style="width: 200px;"
                                                 src=""
                                                 alt=""/>
                                            <div class="col-sm-6 news_title" style="width:200px;position: absolute;top:120px;background: #000000;color:#ffffff"></div>
                                        </div>
                                    </div>
                                    @endif
                                    @else
                                    <!--回显内容-->
                                    <img class="uploadpic" src="" style="width: 30%;height: 30%;display: none" alt=""/>
                                    <div class="replywenben" style="display: none"></div>
                                    <div class="row news" style="display: none">
                                        <div style="position: relative">
                                            <img class="news_image" style="width: 200px;"
                                                 src=""
                                                 alt=""/>
                                            <div class="col-sm-6 news_title" style="width:200px;position: absolute;top:120px;background: #000000;color:#ffffff"></div>
                                        </div>
                                    </div>
                                    @endif

                                    <!--关联的类型-->
                                    @if($edit_mode == 1)
                                    @if($replyinfo->type == 'text')
                                    <input type="hidden" class="type" value="text"/>
                                    @elseif($replyinfo->type == 'news')
                                    <input type="hidden" class="type" value="news"/>
                                    @elseif($replyinfo->type == 'image')
                                    <input type="hidden" class="type" value="image"/>
                                    @endif
                                    @else
                                    <input type="hidden" class="type" value=""/>
                                    @endif
                                </div>
                                <div class="col-sm-4">
                                    <!--        <a class="fa fa-trash-o"></a>-->
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    @if ($edit_mode == 1)
                                    <button class="btn btn-primary editautoreply" type="submit">保存内容</button>
                                    @else
                                    <button class="btn btn-primary submitautoreply" type="submit">保存内容</button>
                                    @endif
                                </div>
                            </div>
                        </form>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('script')
@parent
<!--<script src="/js/sweetalert/sweetalert.min.js"></script>-->
<script src="/js/parsley/parsley.min.js?t={{time()}}"></script>
<script src="/js/parsley/parsley.extend.js?t={{time()}}"></script>
<script src="/js/jqForm/jquery.form.min.js?t={{time()}}"/>
<script src="/js/sweetalert/sweetalert.min.js?t={{time()}}"></script>
<script src="/js/parsley/zh_cn.js?t={{time()}}"></script>
<script>
    // 提交
    $('.submitautoreply').on('click', function() {
        // 获取素材类型
        var $type = $('.type').val();
        switch ($type) {
            case 'text':
                // 获取文本内容
                var $content = $('.replywenben').html();
                break;

            case 'image':
                // 获取图片media_id
                var $media_id = $('.uploadpic').data('mediaid');
                break;

            case 'news':
                // 获取图文消息media_id
                var $media_id = $('.news_image').data('mediaid');
                break;
        }

        var formOptions = {
            data: { content: $content, media_id: $media_id, type: $type },
            //clearForm: true,
            beforeSubmit : function() {
                console.log('test form success!');
                //window.Parsley.setLocale('zh_cn');
                var $parsley_result = $('#submitreply').parsley();
                if($('.type').val()=='') {
                    sweetAlert("Oops...", '请检查是不是有什么遗漏啦', "info");
                    return false;
                }

                console.log($parsley_result);

            },
            success : function(data) {
                console.log('submited!');
                if(data.code!=2000) {console.log('submit form failed');
                    sweetAlert("Oops...", data.message, "error");
                    return false;
                }else {
                    console.log('submit form success!');
                    swal("Good job!", "添加自动回复成功!", "success");
                    $('#submitreply').resetForm();
                }
            }
        }
        $('#submitreply').ajaxForm(formOptions);

    });

    // 编辑
    $('.editautoreply').on('click', function() {
        // 获取素材类型
        var $type = $('.type').val();
        switch ($type) {
            case 'text':
                // 获取文本内容
                var $content = $('.replywenben').html();
                break;

            case 'image':
                // 获取图片media_id
                var $media_id = $('.uploadpic').data('mediaid');
                break;

            case 'news':
                // 获取图文消息media_id
                var $media_id = $('.news_image').data('mediaid');
                break;
        }

        var formOptions = {
            data: { content: $content, media_id: $media_id, type: $type },
            //clearForm: true,
            beforeSubmit : function() {
                console.log('test form success!');
                //window.Parsley.setLocale('zh_cn');
                var $parsley_result = $('#submitreply').parsley();
                if($('.type').val()=='') {
                    sweetAlert("Oops...", '请检查是不是有什么遗漏啦', "info");
                    return false;
                }
                console.log($parsley_result);
            },
            success : function(data) {
                console.log('submited!');
                if(data.code!=2000) {console.log('submit form failed');
                    sweetAlert("Oops...", data.message, "error");
                    return false;
                }else {
                    console.log('submit form success!');
                    swal("Good job!", "修改自动回复成功!", "success");
                }

            }
        }
        $('#submitreply').ajaxForm(formOptions);

    });


    //tip提示
    $('.wenben').hover(function() {
        layer.tips('文本', '.wenben', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    },function(){});

    $('.tupian').hover(function() {
        layer.tips('图片', '.tupian', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    },function(){});

    $('.tuwen').hover(function() {
        layer.tips('图文', '.tuwen', {
            tips: [1, '#0FA6D8'] //还可配置颜色
        });
    },function(){});

    // 插入文本
    $('.wenben').on('click', function() {
        layer.open({
            type: 2,
            area: ['800px', '600px'],
            fix: true, //固定
            maxmin: true,
            content: "{{route('writeWenben')}}"
        });
    });

    // 插入图片
    $('.tupian').on('click', function() {
        layer.open({
            type: 2,
            area: ['700px', '530px'],
            fix: true, //固定
            maxmin: true,
            content: "{{route('getPicList')}}"
        });

    });

    // 插入图文消息
    $('.tuwen').on('click', function() {
        layer.open({
            type: 2,
            area: ['1050px', '700px'],
            fix: true, //固定
            maxmin: true,
            content: "{{route('getNewsList')}}"
        });
    });


</script>
@stop
